import
 {createSlice,
  createAsyncThunk} 
 from "@reduxjs/toolkit"

 import {MovieRequest} from "../../api/index.js"

// 同步的action是在reducers配置reducer方法时自动生成的, reducer里的方法就是action中type类型


// 异步action是自己单独写的,第一个参数是type的值,自己单独书写的没有在reducers相配置就需要添加命名空间的前缀才符合命名规范


//  我们使用createAsyncThunk()方法来创建异步action
// createAsyncThunk()方法接受两个参数,第一个参数是type的值需要前缀符合命名规范,
// 第二个参数是回调函数,回调函数就是异步action的函数
export const getMovieAction=createAsyncThunk("movie/getMovieList",async ()=>{
  // 在当前函数中执行异步操作  axios请求
    const result = await MovieRequest()
    console.log(result,"result")//打印下确定异步是否操作,拿到值代表异步函数执行了

    // 在这个函数中return的值,就是在thunk中间件中再次disptch的值,中间件会帮我们disptch,在这disptch之后才进到reducer接收这个值
    // reducer 拿到值处理数据的
    return  result.data.data.list
    

})


const movieSlice=createSlice({
  name: "movie",
  initialState:{
    movieList:[]
  },
  reducers:{
    //reducer用来操作数据的
    // 异步请求不能在这写,在这写reducer会额外生成对应的action,没法和外面自己写的action对应
  },

  // 异步action处理,需要书写额外的reducer处理,不能书写在reducers中,因为reducers会创建一个对应的action
  extraReducers:{
    [getMovieAction.fulfilled](prev,action){
      console.log('异步action成功---getMovieAction')
      prev.movieList=action.payload
    },
     [getMovieAction.rejected](){
      console.log('异步action失败---getMovieAction')
    },
     [getMovieAction.pending](){
      console.log('异步action进行中---getMovieAction')
    },
  }
})

export default movieSlice.reducer

